<template>
  <div>
    <div id="coursesTimetables">
      <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__lightSpeedInLeft"
          leave-active-class="animate__fadeIn"
      >
        <p style="text-align: center;">移动2002课程表</p>
      </transition>
      <div>
        <van-pagination @change="changePagination" v-model="currentPage" :show-page-size="5" page-count=18 :items-per-page="10">
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
      <div v-show="flag">
        <p style="font-size: 20px; color: red; text-align: center;">出错了。。。请联系管理员！</p>
        <p style="font-size: 20px; color: red; text-align: center;">可能该周未更新或不兼容该系统！</p>
        <p style="font-size: 20px; color: red; text-align: center; font-weight: 800">请切换PC浏览器或安卓浏览器再次尝试!!</p>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
import axios from "axios";
import { mapMutations, mapState, mapActions } from 'vuex'
import Timetables from 'timetables'
export default {
  name: "my_Course",
  data() {
    return {
      currentPage: null, // 导航栏的页数,
      tb: null,
      list: [],
      flag: true
    }
  },
  computed: {
    ...mapState({
      'Week': state => state.course.Week
    }),
    ...mapState("course", ['courseList'])
  },
  created() {
    // （更新课表数组）
    this.getWeek(); // 更新Vuex中的Week并映射到计算属性
    this.currentPage = parseInt(this.Week); // 更新UI
    console.log(this.currentPage)
    this.getCourse(this.Week) // 首次发送请求 且更新数组内容
  },
  mounted() {
    PubSub.publish('CourseCom', 1)

    // this.timetable = new Timetables({
    //   el: '#coursesTimetables',
    //   timetables: this.courseLists,
    //   week: this.week,
    //   timetableType: this.timetableType,
    //   styles: this.styles
    // })
    this.changePagination();
  },
  methods: {
    async changePagination() {
      console.log('页码变动啦', this.currentPage);
      // document.querySelector('#courseWrapper').remove();
      if(document.querySelector('#courseWrapper') !== null) {
        document.querySelector('#courseWrapper').remove();
      }
      try {
        // 发送请求
        let { data } = await axios.get(`http://43.142.46.124:3000/api/getCourse?week=${this.currentPage}`);
        console.log(data)
        if(typeof data === 'object') {
          this.renderDom(data)
        }else {
          this.flag = true;
          console.log('暂无数据')
        }
      }catch (err) {
        console.log('err')
      }
    },
    renderDom({courses}) {
      console.log('course', courses)
      this.flag = false;
      // 拿到数据后 对timetables 的数组进行 加工
        if(courses !== undefined) {
          courses.forEach((item, index)=> {
            this.list[index] = item.course;
          });
          console.log( this.list)
          if(this.tb) {
            this.tb.timetables = null;
          }
          this.tb = new Timetables({
            el: '#coursesTimetables',
            timetables: this.list,
            week: ['周一', '周二', '周三', '周四', '周五'],
            timetableType: [
              ['上午', 4],
              ['下午', 4],
              ['晚上', 4]
            ],
            styles: {
              Gheight: 50,
              leftHandWidth: 50
            },
          })
          document.querySelector('.Courses-head').style.height = '40px';
          document.querySelector('.Courses-head').style.textAlign = 'center';
          document.querySelector('.Courses-head').style.lineHeight = '40px';
          [...document.querySelectorAll('.course-hasContent')].forEach(item => {
            item.style.padding = '10px';
            item.style.boxSizing = 'border-box';
            item.style.borderRadius = '10px';
          });
          // document.querySelector('.Courses-leftHand > div').style.textAlign = 'center';
          [...document.querySelector('.Courses-leftHand').children].forEach((item, index) => {
            if(index === 0) {
              item.style.height = '40px';
            }
            item.style.textAlign = 'center';
            item.style.lineHeight = '200px';
          });
          [...document.querySelectorAll('.course-hasContent')].forEach((item)=> {
            item.parentElement.style.textAlign = 'center';
          });
      }else {
          this.tb.timetables = [];
          throw new Error('暂无数据')
        }
    },
    ...mapMutations({
      "getWeek": 'course/getWeek'
    }),
    ...mapMutations("course", ['getWeek']),
    ...mapActions("course", ['getCourse'])
  }
}
</script>

<style scoped>
  span {
    text-align: center !important;
  }
  #coursesTimetables {
    height: 100%;
  }
  .Courses-head {
    text-align: center !important;
    line-height: 40px !important;
  }
  .course-hasContent {
    padding: 10px !important;
    box-sizing: border-box;
  }
</style>